<template>
    <div class="item-cell">
        <van-cell-group>
            <van-cell is-link :to="to"  @click="clickCell">
                <template slot="title" >
                    <img :src="icon" class="icon" v-show="icon.length>0">
                    <span class="custom-text" :style="{'color':fontColor}" >{{title}}</span>
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script>
    import {Toast, Dialog, Button} from 'vant';
    export default {
        name: "ItemCell",
        props:{
            title:{
                type:String,
                default:''
            },
            size:{
                type:String,
                default:''
            },
            icon:{
                type:String,
                default:''
            },
            to:{
                type:String,
                default:''
            },
            fontColor:{
                type:String,
                default:'#787ac3'
            }
        },
        data(){
            return {}
        },
        methods:{
            clickCell(){
                if(!this.to||this.to.length<=0){
                    Toast("功能尚未开启，敬请期待！")
                    return
                }
            }
        }

    }
</script>

<style lang="less" scoped>
.item-cell{
    .icon{
        width: 25px!important;
        vertical-align: bottom;
    }
    .custom-text{
        display: inline-block!important;
        height: 24px!important;
        line-height: 24px!important;
        margin-left: 10px;
        font-size: 16px;
    }
}
</style>
